<template>
  <div class="homeHeader">
    <div class="headerLeft">
      <span class="iconfont back-icon">&#xe658;</span>
    </div>
    <div class="headerMiddle">
      <a-input-search placeholder="输入城市/景点/游玩主题" @search="onSearch" />
    </div>
    <div class="headerRight">
      <div class="citySelect">
        <!--在该处点击可以传递到页面City.vue-->
        <router-link to="/city">
        <span class="city-name">{{this.city}}</span>
        <span class="iconfont city-icon">&#xe65c;</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  props: {
    city: String
  },
  methods: {
    onSearch (value) {
      /* 在input框定义一个函数，将输入进去信息传出来 */
      /* value即为input框传递过来的信息 */
      console.log(value)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/commStyle.styl"
.homeHeader
  /* Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 */
  /* 此时，即使没有width:100%,homeHeader都会将一行撑满 */
  display: flex
  /* 将homeHeader整体向上移 */
  margin-top: -1.2rem
  /* 使用公共样式表 */
  background: $bgColor
  height: .88rem
  text-align: center
  /* 项目在主轴上的对齐方式，即在水平方向上的对齐方式 */
  justify-content: space-between
  /* 项目在交叉轴上如何对齐,center代表在交叉轴水平居中 */
  align-items: center
  .headerMiddle
   background: $fontColor
   color: $inputColor
   border-radius: .1rem
   width: 4.5rem
   text-align: center
   padding-left: 0
  .headerRight
    color: $fontColor
    margin-right: .2rem
    .citySelect
     /* 将citySelect栏的宽度与高度进行固定 */
     width: 1.34rem
     height: .5rem
     /* 父系元素citySelect为参考，定位city-name与city-icon的位置 */
     position: relative
     .city-name
       position: absolute
       line-height: .2rem
       left: .2rem
       top: .14rem
       color: white
     .city-icon
       right: 0
       position: absolute
       font-size: .5rem
       color: white
  .headerLeft
    color: $fontColor
    margin-left: .2rem
    .back-icon
      font-size: .5rem
</style>
